<template>
    <div>
        <el-select @change="setID" filterable v-model.sync="cid" placeholder="Select" size="large">
            <el-option v-for="item in listData" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { get } from '@/util/request.js'
import { ref, onMounted } from 'vue'

const cid = ref(null)
const listData = ref([])
const emits = defineEmits(['handle'])
const props = defineProps({
    id: { default: null, type: Number }
})

onMounted(() => {
    cid.value = props.id
    get('/category/get').then((resp) => {
        listData.value = resp.insts
    })
})

const setID = (id) => {
    emits('handle', id)
}
</script>
